<template>
  <div class="echarts">
    <div
      :style="{ width: chartWidth, height: chartHeight }"
      class="no-data"
      v-if="this.data.length == 0"
    >
      <span>画图展无数据</span>
    </div>
    <div ref="tree" :style="{ width: chartWidth, height: chartHeight }"></div>
  </div>
</template>

<script>
import OptionTree from './../echarts-js/echarts-tree'
import echartsMixin from './../echarts-js/echarts-mixin'
export default {
  mixins: [echartsMixin],
  mounted() {
    this.initChart()
  },
  methods: {
    //初始化画图
    initChart() {
      //设置画图对象
      this.myChart = this.$echarts.init(this.$refs.tree, this.theme)
      const tree = new OptionTree(this.otherOption, this.data, this.showData)
      //调用初始化图像显示函数
      this.initConfig(tree)
      //开始画图
      this.myChart.setOption(tree.option)
    },
    initConfig(tree) {
      //注意事项: 必需：参数是必传参数 可选：参数为可选参数并设定默认值 默认：不需传参数，手动设置 

      //必需配置项

      //可选配置项
      tree.setTitleName(tree.option, this.titleName) //设置图形标题
      tree.setExportImgBcolor(tree.option, this.exportImgBcolor) //设置导出图片的背景颜色
      // tree.setXAxisName(tree.option, this.xAxisName) //设置x坐标轴的名称
      // tree.setYAxisName(tree.option, this.yAxisName) //设置y坐标轴的名称
      tree.isShowTitle(tree.option, this.isShowTitle) //是否显示图形标题
      tree.isShowLegend(tree.option, this.isShowLegend) //是否显示图形的图列组件
      tree.isShowTooltip(tree.option, this.isShowTooltip) //是否显示图形的提示框组件
      tree.isShowToolbox(tree.option, this.isShowToolbox) //是否显示图形的工具栏组件
      // tree.isShowDataZoom(tree.option, this.isShowDataZoom) //是否显示图形的区域缩放
      tree.isShowLabel(tree.option, this.isShowLabel) //是否显示图形的点上方的默认信息

      //默认的配置项
      tree.isShowXAxis(tree.option, false)  //关闭x轴的显示
      tree.isShowYAxis(tree.option, false)  //关闭y轴的显示
      tree.isShowDataZoom(tree.option, false) //关闭图形的区域缩放

      tree.setSeries(tree.option, this.mySeries) //更新series配置的信息
    }
  }
}
</script>

<style scoped>
.no-data {
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>